<template>
	<view class="cart-good">
		<view class="good-head">
			<view class="good-head-inner el-flex">
				<view class="good-head-inner-left" @click="deleteSelect">
					<view class="select" :class="{'inner-select':AllSelect}"></view>
				</view>
				<view class="good-head-inner-middle">
					小米自营
				</view>
				<view class="good-head-inner-right el-flex">
					<image src="../../static/images/icon_tip_black2.png" mode=""></image>
					<text>已免运费</text>
				</view>
			</view>
		</view>
		<view class="cart-item" v-for="(item,index) in itemIds" :key="index">
			<view class="cart-item-inner">
				<view class="inner-info">
					<view class="inner-info-cover el-flex">
						<view class="info-cover-left el-flex">
							<view class="cover-left-select el-flex" @click="selectItem(index)">
								<view class="select-item" :class="{'inner-select':item.item.isSelect}"></view>
							</view>
							<view class="info-cover-img">
								<view class="cover"></view>
								<image :src="item.item.img_url" mode=""></image>
							</view>
						</view>
						<view class="info-cover-right">
							<view class="info-cover-right-info">
								<view class="name">
									{{item.item.original_name}}
								</view>
								<view class="buy-option">
									<view class="buy-option-inner el-flex"
										@click="changeGood(item.item.goods_id,item.item.packageList,index)">
										<view class="buy-option-inner-name">
											<text v-for="(i,j) in item.item.selectedArr" :key="j"
												style="margin-right: 0.077rem;">{{i}}</text>
										</view>
										<image src="../../static/images/icon_arrow_down_black2.png" mode=""></image>
									</view>
								</view>
								<view class="buy-tags el-flex ">
									<view class="buy-tag-item ">
										{{item.item.price>=4000?24:6}}期免息
									</view>
								</view>
								<view class="buy-price el-flex">
									<view class="buy-price-left el-flex">
										<view class="cur">
											¥
										</view>
										<view class="price">
											{{item.item.price}}
										</view>
									</view>
									<view class="buy-price-right el-flex">
										<view class="number el-flex">
											<view class="j el-flex" @click="editCartNumber(index,'')">
												<view class="bg el-flex" :style="{'opacity':item.count>1?1:0.2}">
													<image src="../../static/images/icon_minus_black_new.png" mode="">
													</image>
												</view>
											</view>
											<view class="s">
												<input type="text" :value="item.count">
											</view>
											<view class="a el-flex" :style="{'opacity':item.count>=5?0.2:1}"
												@click="editCartNumber(index,'add')">
												<view class="bg el-flex">
													<image src="../../static/images/icon_add_black_new.png" mode="">
													</image>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<block v-for="(pack,packIndex) in item.item.packageList" :key="packIndex">
						<view class="pack-item" v-if="pack.isSelect">
							<view class="pack-item-inner el-flex">
								<view class="pack-item-inner-left el-flex">
									<!-- <view class="cover-left-select el-flex" @click="changePack(index,packIndex)">
										<view class="select-item" :class="{'inner-select':pack.isSelect}"></view>
									</view> -->
									<view class="cover-right">
										<view class="cover"></view>
										<image :src="pack.goods_list[0].goods_img" mode=""></image>
									</view>
								</view>
								<view class="pack-item-inner-right text-ellipsis">
									<view class="pack-item-inner-right-name el-flex">
										<text class="inner-icon">
											加价购
										</text>
										<text class="inner-name text-ellipsis">
											{{pack.goods_list[0].goods_name}}
										</text>
										<text class="del" @click="changePack(index,packIndex)">删除</text>
									</view>
									<view class="pack-item-inner-right-price el-flex">
										<text class="pri">¥{{pack.act_price}}</text>
										<text class="num">x 1</text>
									</view>
								</view>
							</view>
						</view>
					</block>
					<block v-for="(serve,serveIndex) in item.item.multi_service_bargins.first">
						<block v-for="(serveChild,childIndex) in serve.service_info">
							<template v-if="serveChild.isSelect">
								<view class="servr-item el-flex">
									<view class="servr-item-left el-flex">
										<view class="l"></view>
										<view class="r">
											<view class="cover"></view>
											<template v-if="serve.service_type_name=='service_micloud'">
												<image
													src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1572490983.06999803.jpg"
													mode=""></image>
											</template>
											<template v-else-if="serve.service_type_name=='service_prolong'">
												<image
													src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205231453_2126ed0b86f8fac1a0498a053cf5c337.png"
													mode=""></image>
											</template>
											<template v-else>
												<image
													src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212261525_bfb3fcf0720b57a3f90cde2a2d58d98e.png"
													mode=""></image>
											</template>
										</view>
									</view>
									<view class="servr-item-right">
										<view class="t el-flex">
											<view class="t-l">
												<view class="txt">
													服务
												</view>
											</view>
											<view class="t-r">
												{{serveChild.service_name}}
											</view>
										</view>
										<view class="b el-flex">
											<view class="b-l">
												¥{{serveChild.service_price}}
											</view>
											<view class="b-r">
												x 1
											</view>
										</view>
									</view>
								</view>

							</template>
						</block>

					</block>
					<template v-if="item.item.isSelect&&item.item.multi_service_bargins.first.length!==0">
						<view class="h"></view>
						<view class="add-item el-flex" @click="addServer(index)">
							<view class="add-item-left">
								服务
							</view>
							<view class="add-item-middle">
								<block v-for="(i,j) in item.item.multi_service_bargins.first">
									<text>{{i.type_name}}</text><text
										v-if="j!=item.item.multi_service_bargins.first.length-1">|</text>
								</block>
							</view>
							<view class="add-item-right el-flex">
								<text v-if="showServe(index)">重选</text>
								<text v-else>选购</text>
								<image src="../../static/images/icon_arrow_right_black3.png" mode=""></image>
							</view>
						</view>
						<view class="add-item el-flex" v-for="(i,j) in item.item.packageList" :key="j"
							@click="addPack(index,j)" v-if="!i.isSelect">
							<view class="add-item-left">
								换购
							</view>
							<view class="add-item-middle el-flex">
								<view class="add-item-middle-name text-ellipsis">
									{{i.goods_list[0].goods_name}}
								</view>
								<view class="add-item-middle-price">
									<text class="g">¥{{i.act_price}}</text>
									<text class="s">(已省¥{{i.goods_list[0].goods_price-i.act_price}})</text>
								</view>
							</view>
							<view class="add-item-right el-flex">
								<text>选购</text>
								<image src="../../static/images/icon_arrow_right_black3.png" mode=""></image>
							</view>
						</view>
					</template>
				</view>
				<view class="height"></view>
			</view>
		</view>
		<popSelectItem :isShow='isShow' :multi_service_bargins='multi_service_bargins'
			@selectServeItem='selectServeItem' @closePopup='closePopup'>
		</popSelectItem>
		<popGoodItem :goods_id='goods_id' :isShow='isShowPlus' @changeCartItem='changeCartItem'
			@closePopupPlus='closePopupPlus' :packageList='packageList'></popGoodItem>
	</view>

</template>

<script>
	import popSelectItem from '../pop-select-item/pop-select-item.vue'
	import popGoodItem from '../pop-good-item/pop-good-item.vue'
	export default {
		name: "cart-item",
		components: {
			popSelectItem,
			popGoodItem
		},
		props: {
			itemIds: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			AllSelect() {
				return this.itemIds.every(i => i.item.isSelect)
			},
		},
		data() {
			return {
				isShow: false,
				isShowPlus: false,
				goodIndex: 0,
				goods_id: '',
				packageList: [],
				multi_service_bargins: []
			};
		},
		methods: {
			changeCartItem() {
				this.$emit('changeParentCart')
			},
			addPack(index, packIndex) {
				this.$emit('addPack', {
					index: index,
					packIndex: packIndex,
					flag: false
				})
			},
			changePack(index, packIndex) {
				let self = this
				uni.showModal({
					content: '确认要将这件商品删除？',
					success: function(res) {
						if (res.confirm) {
							self.$emit('addPack', {
								index: index,
								packIndex: packIndex,
								flag: true
							})
						}
					}
				});
			},
			closePopupPlus() {
				this.isShowPlus = false
			},
			changeGood(id, packageList, index) {
				this.goods_id = id
				this.goodIndex = index
				this.isShowPlus = true
				this.packageList = packageList
			},
			showServe(index) {
				let list = this.itemIds[index].item.multi_service_bargins.first
				for (var i = 0; i < list.length; i++) {
					for (var j = 0; j < list[i].service_info.length; j++) {
						if (list[i].service_info[j].isSelect) {
							return true
						}
					}
				}
				return false;
			},
			selectServeItem(obj) {
				this.$emit('selectServeItem', {
					obj: obj,
					goodIndex: this.goodIndex
				})
			},
			closePopup() {
				this.isShow = false
			},
			addServer(index) {
				this.goodIndex = index
				this.multi_service_bargins = this.itemIds[index].item.multi_service_bargins.first
				this.isShow = true
			},
			deleteSelect() {
				this.$emit('deleteSelect', !this.AllSelect)
			},
			selectItem(index) {
				this.$emit('selectItem', index)
			},
			editCartNumber(index, type) {
				this.$emit('editCartNumber', {
					index: index,
					type: type
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
		box-sizing: border-box;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	}

	.cart-good {
		border-radius: .2rem;
		overflow: hidden;

		.good-head {
			.good-head-inner {
				background-color: rgb(255, 255, 255);
				border-top-left-radius: .2rem;
				border-top-right-radius: .2rem;
				margin: 0 .24rem;
				padding: .24rem .24rem .24rem 0;

				.good-head-inner-left {
					padding-left: .2rem;
					padding-right: 0.125rem;

					.select {
						height: .32rem;
						width: .32rem;
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center center;
						background-image: url(../../static/images/cart_checkbox_unselect_icon.png);
					}

					.inner-select {
						background-image: url(../../static/images/cart_checkbox_select_icon.png);
					}
				}

				.good-head-inner-middle {
					color: rgb(51, 51, 51);
					font-size: .25rem;
					font-weight: bold;
					text-align: left;
					flex: 1 1 0%;
				}

				.good-head-inner-right {
					margin-left: .23rem;
					height: .3rem;

					image {
						margin-top: -0.019rem;
						height: .2rem;
						width: .2rem;
					}

					text {
						color: rgb(102, 102, 102);
						font-size: .211rem;
						height: .3rem;
						margin-left: 0.077rem;
					}
				}
			}
		}

		.cart-item {
			&:last-child {
				.cart-item-inner {
					border-bottom-left-radius: .19rem;
					border-bottom-right-radius: .19rem;
				}
			}

			.cart-item-inner {
				background-color: rgb(255, 255, 255);
				margin-left: .24rem;
				margin-right: .24rem;
				padding-top: .32rem;

				.inner-info {
					.inner-info-cover {
						padding-left: .2rem;
						padding-right: .23rem;
						justify-content: space-between;

						.info-cover-left {
							.cover-left-select {
								height: 1.8rem;
								flex-direction: column;
								margin-left: -.19rem;
								padding-left: .2rem;
								padding-right: .2rem;
								width: .72rem;

								.select-item {
									height: .32rem;
									width: .32rem;
									background-image: url(../../static/images/cart_checkbox_unselect_icon.png);
									background-size: cover;
									background-repeat: no-repeat;
									background-position: center center;
								}

								.inner-select {
									background-image: url(../../static/images/cart_checkbox_select_icon.png);
								}
							}

							.info-cover-img {
								position: relative;
								background-color: rgb(255, 255, 255);
								border-radius: 0.163rem;
								height: 1.8rem;
								margin-right: .2rem;
								width: 1.8rem;

								.cover {
									background-color: rgba(0, 0, 0, 0.03);
									border-radius: 0.163rem;
									height: 1.8rem;
									width: 1.8rem;
									position: absolute;
									left: 0;
									right: 0;
									top: 0;
									bottom: 0;
								}

								image {
									border-radius: 0.125rem;
									height: 1.8rem;
									opacity: 1;
									width: 1.8rem;
								}
							}
						}

						.info-cover-right {
							flex: 1 1 0%;

							.info-cover-right-info {
								margin-bottom: 0.096rem;
								margin-right: .2rem;

								.name {
									-webkit-line-clamp: 2;
									color: rgb(51, 51, 51);
									flex-direction: row;
									font-size: 0.288rem;
									line-height: 0.384rem;
									margin-right: 0px;
									text-align: left;
									max-width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								.buy-option {
									height: .46rem;
									margin-top: 0.077rem;
									position: relative;

									.buy-option-inner {
										position: absolute;
										background-color: rgba(0, 0, 0, 0.03);
										border-radius: 0.077rem;
										height: .4rem;
										max-width: 3.6rem;
										padding-right: 0.125rem;
										padding-left: 0.125rem;
										top: 0.057rem;

										.buy-option-inner-name {
											color: rgb(102, 102, 102);
											font-size: .23rem;
											line-height: 0.384rem;
											max-width: 3.12rem;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}

										image {
											height: .24rem;
											margin-left: 0.057rem;
											width: .24rem;
										}
									}
								}

								.buy-tags {
									height: 0.278rem;
									margin-top: 0.163rem;
									justify-content: flex-start;

									.buy-tag-item {
										color: rgb(255, 89, 52);
										font-size: .211rem;
										border-radius: .23rem;
										border: 0.019rem solid rgb(255, 89, 52);
										height: .26rem;
										margin-right: 0.057rem;
										padding-right: 0.057rem;
										padding-left: 0.057rem;
									}
								}

								.buy-price {
									height: .44rem;
									margin-top: 0.077rem;
									padding-top: 0.019rem;

									.buy-price-left {
										position: relative;

										.cur {
											left: 0;
											position: absolute;
											top: 0.096rem;
											color: rgb(255, 89, 52);
											font-size: .25rem;
											font-weight: bold;
											text-align: left;
										}

										.price {
											padding-left: .153rem;
											color: rgb(255, 89, 52);
											font-size: 0.364rem;
											font-weight: 500;
											text-align: left;
										}
									}

									.buy-price-right {
										height: .44rem;
										justify-content: flex-end;
										flex: 1 1 0%;

										.number {
											border: 0.019rem solid rgb(229, 229, 229);
											background-color: rgb(255, 255, 255);
											border-radius: .2rem;

											.j,
											.a {
												height: .4rem;
												width: .5rem;
											}

											.bg {
												height: .18rem;
												width: .18rem;

												image {
													height: 100%;
													width: 100%;
												}
											}

											.s {
												border: 0.019rem solid rgb(229, 229, 229);
												height: .4rem;
												width: 0.604rem;

												input {
													color: rgb(51, 51, 51);
													font-size: .25rem;
													outline: none;
													padding: 0px;
													text-align: center;
													width: .52rem;
												}
											}
										}
									}
								}
							}
						}
					}

					.pack-item {
						margin-top: 0.125rem;
						padding: 0.2rem;

						.pack-item-inner {
							.pack-item-inner-left {
								.cover-left-select {
									height: .796rem;
									margin-left: -.19rem;
									padding-left: .2rem;
									padding-right: .2rem;
									width: .72rem;

									.select-item {
										height: .32rem;
										width: .32rem;
										background-image: url(../../static/images/cart_checkbox_unselect_icon.png);
										background-size: cover;
										background-repeat: no-repeat;
										background-position: center center;
									}

									.inner-select {
										background-image: url(../../static/images/cart_checkbox_select_icon.png);
									}
								}

								.cover-right {
									margin-right: .24rem;
									position: relative;

									.cover {
										position: absolute;
										top: 0;
										left: 0;
										background-color: rgba(0, 0, 0, 0.03);
										border-radius: .163rem;
										height: .796rem;
										width: .796rem;
										z-index: 99;
									}

									image {
										background-color: rgb(255, 255, 255);
										border-radius: .163rem;
										height: .796rem;
										width: .796rem;
									}
								}
							}

							.pack-item-inner-right {
								flex: 1 1 0%;


								.pack-item-inner-right-name {
									min-height: .3rem;
									max-width: 100%;
									justify-content: flex-start;
									position: relative;

									.inner-icon {
										border: 0.019rem solid rgb(255, 89, 52);
										border-radius: 0.0383rem;
										height: .26rem;
										margin-right: 0.077rem;
										padding-right: 0.0383rem;
										padding-left: 0.0383rem;
										color: rgb(255, 89, 52);
										font-size: .211rem;
									}

									.inner-name {
										max-width: 70%;
										display: block;
										color: rgb(51, 51, 51);
										font-size: .25rem;
										padding-left: 0.0383rem;
										text-align: left;
									}

									.del {
										position: absolute;
										right: 0;
										color: rgba(0, 0, 0, 0.5);
										font-size: .22rem;
									}
								}

								.pack-item-inner-right-price {
									margin-top: 0.125rem;
									justify-content: space-between;

									.pri {
										color: rgb(255, 89, 52);
										font-size: .25rem;
										font-weight: 600;
										text-align: left;
									}

									.num {
										color: rgb(51, 51, 51);
										font-size: .25rem;
										margin-right: 0.077rem;
										text-align: right;
									}
								}
							}
						}
					}

					.h {
						height: .335rem;
					}

					.servr-item {
						margin-top: 0.125rem;
						padding: 0.125rem;

						.servr-item-left {
							.l {
								height: 0.4rem;
								margin-left: -.19rem;
								padding-left: .2rem;
								padding-right: .2rem;
								width: 0.796rem;
							}

							.r {
								background-color: rgb(255, 255, 255);
								border-radius: .163rem;
								height: 0.796rem;
								width: 0.796rem;
								position: relative;
								align-items: flex-end;
								margin-right: .24rem;

								.cover {
									position: absolute;
									top: 0;
									left: 0;
									z-index: 99;
									background-color: rgba(0, 0, 0, 0.03);
									border-radius: .163rem;
									height: 0.796rem;
									width: 0.796rem;
								}

								image {
									height: 100%;
									width: 100%;
								}
							}
						}

						.servr-item-right {
							flex: 1 1 0%;

							.t {
								justify-content: flex-start;
								line-height: 1.5;

								.t-l {
									border: 0.019rem solid rgb(255, 89, 52);
									border-radius: 0.038rem;
									height: 0.26rem;
									margin-right: 0.077rem;
									padding-right: 0.038rem;
									padding-left: 0.038rem;

									.txt {
										color: rgb(255, 89, 52);
										font-size: 0.211rem;
									}
								}

								.t-r {
									color: rgb(51, 51, 51);
									font-size: 0.25rem;
									margin-right: 0px;
									padding-left: 0.038rem;
									text-align: left;
								}
							}

							.b {
								line-height: 1.5;
								margin-top: 0.125rem;
								justify-content: space-between;

								.b-l {
									color: rgb(255, 89, 52);
									font-size: 0.25rem;
									font-weight: 600;
									text-align: left;
								}

								.b-r {
									color: rgb(51, 51, 51);
									font-size: 0.25rem;
									margin-right: 0.077rem;
									text-align: right;
								}
							}
						}
					}

					.add-item {
						margin-bottom: 0.144rem;
						padding-left: .72rem;
						padding-right: .26rem;

						.add-item-left {
							margin-right: .24rem;
							color: rgb(0, 0, 0);
							font-size: .23rem;
							font-weight: bold;
						}

						.add-item-middle {
							max-width: 100%;
							justify-content: flex-start;
							flex: 1 1 0%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							padding-right: 0.077rem;
							color: rgb(0, 0, 0);
							font-size: .23rem;

							.add-item-middle-name {
								color: rgb(0, 0, 0);
								font-size: .23rem;
								max-width: 2.5rem;
							}

							.add-item-middle-price {
								max-width: 1.92rem;

								.g {
									color: rgb(0, 0, 0);
									font-size: .23rem;
								}

								.s {
									color: rgb(255, 89, 52);
									font-size: .23rem;
									margin-left: 0.077rem;
								}
							}
						}

						.add-item-right {
							text {
								color: rgba(0, 0, 0, 0.5);
								font-size: .23rem;
							}

							image {
								height: .18rem;
								margin-left: 0.057rem;
								width: 0.096rem;
							}
						}
					}
				}

				.height {
					height: .32rem;
				}
			}

		}
	}
</style>